import { assessAnalysisOverview } from '@/services/api/api-assess-week-culture-analysis';
import { ActionType, ProColumns, ProTable } from '@ant-design/pro-components';
import { DatePicker, Space } from 'antd';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import customParseFormat from 'dayjs/plugin/customParseFormat';
import React, { useRef, useState } from 'react';
import { useAccess } from 'umi';
import ReportDetial from '../report/ReportDetial';

dayjs.extend(customParseFormat);
const dateFormat = 'YYYY-MM-DD';
const weekStart = 1; // 1表示周一是一周的开始，0表示周日是一周的开始

interface TableOverviewProps {}
/**
 * 根据 季度 获取 时间范围
 * @param quarter 根据
 * @returns
 */
const getQuarterDates = (quarter: number): Array<string> => {
  const year = dayjs().year();
  let queryReleaseTimes = new Array();

  if (quarter == 1) {
    queryReleaseTimes.push(year + '-01-01');
    queryReleaseTimes.push(year + '-03-31');
  } else if (quarter == 2) {
    queryReleaseTimes.push(year + '-04-01');
    queryReleaseTimes.push(year + '-06-30');
  } else if (quarter == 3) {
    queryReleaseTimes.push(year + '-07-01');
    queryReleaseTimes.push(year + '-09-30');
  } else if (quarter == 4) {
    queryReleaseTimes.push(year + '-10-01');
    queryReleaseTimes.push(year + '-12-31');
  }

  return queryReleaseTimes;
};

const TableOverview: React.FC<TableOverviewProps> = ({}) => {
  const access = useAccess();

  const actionRef = useRef<ActionType>();

  const [searchParam, setSearchParamState] = useState<any>({
    releaseTimes: [
      dayjs().day(weekStart).format(dateFormat),
      dayjs()
        .day(weekStart + 6)
        .format(dateFormat),
    ],
  });

  const columns: ProColumns<AssessWeekCultureAnalysisData.Overview>[] = [
    // {
    //   title: '序号',
    //   dataIndex: 'index',
    //   valueType: 'indexBorder',
    //   width: '50px',
    // },
    {
      title: '区县名称',
      dataIndex: 'areaName',
      ellipsis: true,
      width: '120px',
      align: 'center',
      render: (dom, record, _index, action) => {
        return (
          <ReportDetial
            areaId={record.areaId}
            areaName={record.areaName}
            releaseTimes={searchParam.releaseTimes}
            onRefurbish={() => {
              actionRef.current?.reload();
            }}
          />
        );
      },
    },
    {
      title: '中央媒体量',
      dataIndex: 'releaseCentreMediaCount',
      ellipsis: true,
      width: '120px',
      align: 'center',
    },
    {
      title: '市属媒体量',
      dataIndex: 'releaseLocalMediaCount',
      ellipsis: true,
      width: '120px',
      align: 'center',
    },
    // {
    //   title: '微信',
    //   dataIndex: 'disseminationPriorityRecordTripartitePlatformWxCount',
    //   ellipsis: true,
    //   width: '120px',
    //   align: 'center',
    // },
    // {
    //   title: '微博',
    //   dataIndex: 'disseminationPriorityRecordTripartitePlatformWbCount',
    //   ellipsis: true,
    //   width: '120px',
    //   align: 'center',
    // },
    // {
    //   title: '抖音',
    //   dataIndex: 'disseminationPriorityRecordTripartitePlatformDyCount',
    //   ellipsis: true,
    //   width: '120px',
    //   align: 'center',
    // },
    // {
    //   title: '今日头条',
    //   dataIndex: 'disseminationPriorityRecordTripartitePlatformJrttCount',
    //   ellipsis: true,
    //   width: '120px',
    //   align: 'center',
    // },
    // {
    //   title: '全国热搜',
    //   dataIndex: 'disseminationNationwideTophubCount',
    //   ellipsis: true,
    //   width: '120px',
    //   align: 'center',
    // },
    // {
    //   title: '本地热搜',
    //   dataIndex: 'disseminationLocalTophubCount',
    //   ellipsis: true,
    //   width: '120px',
    //   align: 'center',
    // },
  ];

  return (
    <ProTable<AssessWeekCultureAnalysisData.Overview>
      headerTitle={
        <>
          <span
            style={{
              marginRight: '10px',
              fontSize: 18,
              fontWeight: 'bold',
            }}
          >
            {dayjs().year()}年
          </span>
        </>
      }
      style={{
        marginTop: '16px',
      }}
      cardProps={{
        bodyStyle: {
          padding: 0,
        },
      }}
      bordered={false}
      columns={columns}
      actionRef={actionRef}
      rowKey="areaId"
      search={false}
      request={async (params = {}) => {
        const response = await assessAnalysisOverview({
          ...params,
          ...searchParam,
        });
        return Promise.resolve({
          data: response.data,
          total: response.data.length,
          success: response.code === 0,
        });
      }}
      sticky
      scroll={{
        x: '1300px',
      }}
      pagination={false}
      onRow={(record) => {
        return {
          onClick: () => {},
        };
      }}
      toolbar={{
        filter: (
          <Space>
            <DatePicker.RangePicker
              defaultValue={[dayjs().day(weekStart), dayjs().day(weekStart + 6)]}
              maxDate={dayjs()}
              format={dateFormat}
              variant="filled"
              allowClear={false}
              onChange={(dates, dateStrings) => {
                setSearchParamState({
                  ...searchParam,
                  releaseTimes: dateStrings.map((item) => item),
                });
                actionRef.current?.reloadAndRest();
              }}
            />
          </Space>
        ),
      }}
    />
  );
};
export default TableOverview;
